<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <title>Document</title>
    <style type="text/css">
        /* body, html,#allmap {width: 95%;height: 96%;overflow: hidden;margin:0;font-family:"微软雅黑";} */
        #container {
            width:50%;
            height: 500px;
            position: relative ;
         }  
         #seach-box {
            width:350px;
            height: 45px;
            position: absolute  ;
            left:15%;
            top:30px;
            font-size:15px;
            background:#fff;
            color:#495060;
         }

         #keyword {
             width:310px;
             height: 45px;
             border:0;
             outline:medium;
         }

    </style>
</head>

<body>

    <div id="container" ></div>
    <div id="seach-box"><input type="text" id='keyword'><span>搜索</span></div>
</body>

</body>
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZDue9gF4HfumIt5DcwU0INw1ODmRcV16"></script>
<script src="/backstage/js/baiduMap.js"></script> -->

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=6f0f7b970abdff1b8f0523966ef7c3c3"></script> 
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true
    });

    //注册插件
    AMap.plugin(['AMap.ToolBar','AMap.Autocomplete','AMap.PlaceSearch','AMap.Geocoder'],function(){

        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);

        var autoOptions = {
            // city: "惠州", //城市，默认全国
            input: "keyword"  //使用联想输入的input的id
        };
        autocomplete= new AMap.Autocomplete(autoOptions);
        var placeSearchPoi = new AMap.PlaceSearch({
            // city: "惠州",
            map: map
        })

        AMap.event.addListener(autocomplete, "select", function(elm){
            //TODO 针对选中的poi实现自己的功能
            placeSearchPoi.search(elm.poi.name)
        });  
    })

    //选点
    var clickHandler = function(e) {
        
        map.clearMap(); 
    //    console.log(e);

       //获取详细地址
       var lng = e.lnglat.getLng();
       var lat = e.lnglat.getLat();
       var lnglat = [lng, lat ];
       var geocoder = new AMap.Geocoder()

        geocoder.getAddress(lnglat, function(status, result) {
            console.log(result);
        })

        var marker = new AMap.Marker({
            position: new AMap.LngLat(lng, lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: ''
        });
       
        // 将创建的点标记添加到已有的地图实例：
        map.add(marker);
      
    };

    // 绑定事件
    map.on('click', clickHandler);

   
</script>
</html>
